<script>
import { computed, defineComponent } from 'vue';
import {
  createNamespace,
  transformSize,
  isCssRelativeSize,
} from '../utils';
import FanIcon from '../icon/icon.vue';

export default defineComponent({
  name: createNamespace('Text')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true,
  },
  emits: ['click'],
  components: { FanIcon },
  props: {
    // 是否显示内层白框
    inner: {
      type: Boolean,
      default: false,
    },
    innerRadius: {
      type: String,
      default: '',
    },
    text: {
      type: String,
      default: '',
    },
    textSize: {
      type: [String, Number],
      default: '14',
    },
    bold: {
      type: [Boolean, Number, String],
      default: false,
    },
    align: {
      type: String,
      default: 'left', // center, right
    },
    color: {
      type: String,
    },
    // 行高
    lineHeight: {
      type: [String, Number],
      default: 1.4,
    },
    // 图标前缀
    prefixIcon: {
      type: String,
    },
    iconSize: {
      type: [String, Number],
    },
    iconRadius: {
      type: String,
      default: '4px',
    },
    iconColor: String,
    // 图标与文字间距
    iconSpace: {
      type: [String, Number],
    },
    // 最多展示行数，超出显示省略号，目前只支持 1，2，3
    line: Number,
  },
  setup(props, context) {
    const theStyle = computed(() => {
      const {
        textSize,
        bold,
        align,
        color,
        lineHeight,
        iconSize,
        iconSpace,
      } = props;
      let s = '';
      let theIconSize = transformSize(iconSize);
      const fsize = transformSize(textSize);
      const fsizeValue = parseFloat(fsize, 10);
      const lh = String(lineHeight).includes('px')
        ? parseFloat(String(lineHeight)) / fsizeValue
        : lineHeight;

      if (fsizeValue) {
        if (!theIconSize) {
          const unit = fsize.replace(/[0-9.]/g, '');
          theIconSize = fsizeValue * 1.2 + unit;
        }
        s += `font-size:${fsize};`;
      }
      if (lh) {
        s += `line-height:${lh};`;
      }
      if (bold) {
        if (
          typeof bold === 'number' ||
          (typeof bold === 'string' && Number(bold) >= 100)
        ) {
          s += `font-weight:${bold};`;
        } else {
          s += `font-weight:var(--fan-text-mbold);`;
        }
      }
      if (align) {
        s += `text-align:${align};`;
      }
      if (color) {
        s += `color:${color};`;
      }

      let ibox = '';
      if (['number', 'string'].includes(typeof iconSpace))
        ibox += `margin-right:${transformSize(iconSpace)};`;

      return {
        style: s,
        iconSize: theIconSize,
        ibox,
      };
    });

    const onClick = (e) => {
      context.emit('click', e);
    };

    return { theStyle, onClick };
  },
});
</script>

<template>
  <div :style="theStyle.style" class="fan-bg-container fan2-text" @click="onClick">
    <div class="fan2-text__inner" :class="[
    { box: inner },
    { 'fan-ellipsis': line === 1 },
    { 'fan-multi-ellipsis--l2': line === 2 },
    { 'fan-multi-ellipsis--l3': line === 3 },
  ]" :style="{ borderRadius: innerRadius }">
      <!-- 小程序文本外的属性不识别 em 尺寸 -->
      <div v-if="prefixIcon" class="fan2-text__icon" :style="theStyle.ibox">
        <FanIcon :name="prefixIcon" :size="theStyle.iconSize" :color="iconColor" vertical-align="middle"
          :custom-style="{ borderRadius: iconRadius }" />
      </div>
      <span user-select selectable space="nbsp" class="fan2-text__span"
        :style="{ verticalAlign: !prefixIcon ? 'baseline' : 'middle' }">{{ text }}
        <slot />
      </span>
    </div>
  </div>
</template>

<style lang="less">
.fan2-text {
  max-width: 100%;

  &__inner {
    word-break: break-all;
    white-space: pre-line;

    &.box {
      padding: 2.85%;
      background: #fff;
      border-radius: 8px;
    }
  }

  &__icon {
    line-height: 0;
    margin-right: 2px;
    display: inline-block;
    vertical-align: middle;
  }

  &__span {
    display: inline;
    vertical-align: middle;
    // vertical-align 非 baseline 时，height !== line-height
    line-height: 1;
  }
}
</style>
